
/*
 * @Author: fu.lanyun 
 * @Date: 2019-02-18
 * @Desc: 流程图查看
 */
import React from 'react';
import { connect } from "dva";
import { Spin } from 'antd';
import FlowChartDetail from '../../../../components/flowchartdetail';
import { getViewPortHeight, openNotificationWithIcon } from '../../../../utils/comm';
import styles from './index.less';

@connect(({
  loading,
  FlowChart,
}) => ({
  loading,
  FlowChartStore: FlowChart,
}))
class ChartView extends React.Component {

  constructor(props) {
    super(props);
    this.getViewPortHeight = getViewPortHeight;
    this.openNotificationWithIcon = openNotificationWithIcon;
    this.flowHeight = 'auto';
  }

  componentDidMount() {
    this.flowHeight = this.getViewPortHeight() - 64;
    this.initModelDetail();
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({ type: "FlowChart/clearData" });
  }

  // 通过Id获取信息
  initModelDetail = () => {
    const { location: { query: { modelid = '' } }, dispatch } = this.props;
    if (!modelid) return;
    dispatch({ type: "FlowChart/getModelDetail", payload: { modelId: modelid } }).then(({ errCode }) => {
      if (errCode === 0) {
        const { FlowChartStore: { detailData = {} } } = this.props;
        const { modelJson = {} } = detailData || {};
        const { nodes = [] } = modelJson;
        if (nodes.length === 0) {
          this.openNotificationWithIcon('warning', '', `还未配置流程模型`);
        }
      }
    });
  }

  render() {
    const { loading, FlowChartStore: { detailData = {} } } = this.props;
    const height = this.flowHeight > 450 ? this.flowHeight : 450;
    const dataLoading = loading.effects['FlowChart/getModelDetail'];
    const { modelJson = {} } = detailData || {};
    const { nodes = [], edges = [], groups=[] } = modelJson;
    const chartData = { nodes, edges, groups };
    return (
      <Spin spinning={dataLoading} delay={200}>
        <div className={styles.flowchart}>
          <FlowChartDetail
            height={height}
            data={chartData}
            dataLoading={dataLoading}
            fitView='cc'
          />
        </div>
      </Spin>
    );
  }
}

export default ChartView;